<template>
  <div>
    <!--列表-->
    <el-table :data="transportList">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="货物编号" prop="cropsId" />
      <el-table-column label="农户" prop="farmerNickName" />
      <el-table-column label="原料来源" prop="farmerDept" />
      <el-table-column label="时间" prop="time" />
      <el-table-column label="状态" prop="outFactoryStatus">
        <template v-slot="scope">
          <el-tag v-show="scope.row.outFactoryStatus === 0">已入库</el-tag>
          <el-tag v-show="scope.row.outFactoryStatus === 1">已出库</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template v-slot="scope">
          <el-button v-show="scope.row.outFactoryStatus === 0" size="mini" type="text" @click="noticeDriver(scope.row)">通知运输</el-button>
          <el-button v-show="scope.row.outFactoryStatus === 0" size="mini" type="text" @click="outFactory(scope.row)">出库</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="出库" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="检测结果" prop="nickName"><el-input v-model="form.testingResult" placeholder="请输入检测结果" /></el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注"><el-input v-model="form.remarks" type="textarea" placeholder="请输入内容"></el-input></el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="检测图片:">
              <el-upload class="avatar-uploader" :on-change="getFile" :show-file-list="false" :auto-upload="false">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createMaching">确 定</el-button>
        <el-button @click="open=false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog center title="联系运输" :visible.sync="noticeDriverDialog" width="500px" append-to-body>
      <el-form ref="form" :model="trasportForm" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="选择司机" prop="nickName">
              <el-select v-model="trasportForm.userName" placeholder="请选择">
                <el-option v-for="user in driverList" :key="user.userName" :label="user.nickName" :value="user.userName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="生产厂商" prop="nickName">
              <el-select v-model="trasportForm.deptId" placeholder="请选择">
                <el-option v-for="dept in factoryList" :key="dept.deptId" :label="dept.deptName" :value="dept.deptId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注"><el-input v-model="trasportForm.remarks" type="textarea" placeholder="请输入内容"></el-input></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addNoticeTrasport">确 定</el-button>
        <el-button @click="noticeDriverDialog=false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {formatDate} from "@/utils";
export default {
  name: "MaterialIndexView",
  data(){
    return{
      transportList:[],
      open:false,
      form:{},
      imageUrl:'',
      checkInfo:'',
      TestingPhotoUrl:'',
      driverList:[],
      factoryList:[],
      noticeDriverDialog:false,
      trasportForm:{}
    }
  },methods:{
    //通知运输
    noticeDriver(row){
      this.checkInfo=row
      this.noticeDriverDialog=true
      this.axios.get("/user/user/getDriverList").then(res=>{
        this.driverList=res.data.data
      })
      this.axios.get("/dept/dept/getFactoryList/123").then(res=>{
        this.factoryList=res.data.data
      })
    },
    addNoticeTrasport(){
      this.trasportForm.cropsId = this.checkInfo.cropsId;
      this.trasportForm.farmerUserName = "admin"
      this.trasportForm.farmerNickName = "若依"
      this.trasportForm.time = formatDate(new Date());
      this.trasportForm.driverId = this.trasportForm.userName;
      this.trasportForm.status = 0;
      this.trasportForm.farmerTel = "10086"
      this.trasportForm.farmerDept = "南宁原料产商"
      this.trasportForm.factoryId = this.trasportForm.deptId
      console.log(this.trasportForm)
      this.axios.post("/material/material/addTransport",this.trasportForm)
          .then(res => {
            if(res.data.data){
              this.$message.success('联系运输成功');
              this.noticeDriverDialog = false;
            }
          })
          .catch(err => {
            this.$message.error('联系运输失败，发生异常');
          });
    },
    //出库
    outFactory(row){
      this.checkInfo = row;
      this.open = true
    },
    createMaching(){
      const checkInfoArray = []
      const id = new this.$snowFlakeId().generate();
      checkInfoArray.push(id)
      checkInfoArray.push(id)
      checkInfoArray.push("若依")
      checkInfoArray.push("10086");
      checkInfoArray.push("南宁原料产商");
      checkInfoArray.push(this.checkInfo.cropsId);
      checkInfoArray.push(this.form.testingResult);
      checkInfoArray.push(this.checkInfo.time);
      checkInfoArray.push(formatDate(new Date()));
      checkInfoArray.push(this.TestingPhotoUrl);
      checkInfoArray.push(this.form.remarks);
      this.$httpBlock
          .post(this.$httpUrl + '/materialapi/createMaching', { checkInfoArray: checkInfoArray })
          .then(res => {
            if (res.status === 200) {
              this.axios.get("/material/material/changeInToOut/"+this.checkInfo.cropsId).then(res => {
                if (res.data.data){
                  this.$message.success("出库成功")
                  this.getList();
                }
              }).catch(err => {
                this.$message.error("出库失败")
              })
              this.open = false;
            }
          })
          .catch(err => {
            this.msgError('存储异常 ' + err);
          });
    },
    //上传图片
    getFile(file){
      this.imageUrl = URL.createObjectURL(file.raw);
      this.getBase64(file.raw).then(res => {
        this.imgBase64 = res
        const datas = {
          imageBase64: this.imgBase64
        }
        this.axios.post("/farmers/farmers/imageUpload",datas).then(res => {
          this.TestingPhotoUrl = res.data.msg
          this.$message.success('图片上传成功')
        }).catch(err => {
          this.$message.error('图片上传失败')
        })
      })
    },
    getBase64(file) {
      return new Promise(function(resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function() {
          imgResult = reader.result
        }
        reader.onerror = function(error) {
          reject(error);
        }
        reader.onloadend = function() {
          resolve(imgResult)
        }
      })
    },
    getList(){
      this.axios.get("/material/material/materialList/122").then(res=>{
        this.transportList=res.data.data
      })
    }
  },created() {
    this.getList()
  }
}
</script>

<style scoped>

</style>